import { FC, memo } from 'react'
import './BottomBar.less'
import { useLocation, useNavigate } from 'react-router-dom'
type TRouterConfig = {
  name: string
  path: string
  icon: string
  id: string
}

const BottomBar: FC<{ routerConfig: TRouterConfig[] }> = ({ routerConfig }) => {
  const navigation = useNavigate()
  const location = useLocation()
  const goRouter = (item: TRouterConfig) => {
    navigation(item.path)
  }
  return (
    <div className="BottomBar">
      {routerConfig.map(item => (
        <div key={item.id} className="BottomBar-item" onClick={() => goRouter(item)}>
          <div style={location.pathname === item.path ? { fontSize: '16px' } : { fontSize: '14px' }}>
            <i className={`iconfont ${item.icon}`}></i>
            <div>{item.name}</div>
          </div>
        </div>
      ))}
    </div>
  )
}
export default memo(BottomBar)
